import React from 'react';
import moment from 'moment';
import 'antd/dist/antd.css';
import Component from '..';

export default function Demo() {
    const formatRule = 'YYYY-MM-DD HH:mm';
    const [range, setRange] = React.useState([
        moment()
            .hour(11)
            .minute(20)
            .format(formatRule),
        moment()
            .hour(14)
            .minute(10)
            .format(formatRule)
    ]);
    const userList = [
        {
            id: 3,
            name: '吴某某',
            rangeList: [
                [
                    moment()
                        .hour(15)
                        .minute(0)
                        .format(formatRule),
                    moment()
                        .hour(16)
                        .minute(0)
                        .format(formatRule)
                ],
                [
                    moment()
                        .hour(19)
                        .minute(0)
                        .format(formatRule),
                    moment()
                        .hour(21)
                        .minute(0)
                        .format(formatRule)
                ]
            ]
        },
        {
            id: 1,
            name: '陈某某',
            rangeList: [
                [
                    moment()
                        .hour(10)
                        .minute(20)
                        .format(formatRule),
                    moment()
                        .hour(12)
                        .minute(0)
                        .format(formatRule)
                ],
                [
                    moment()
                        .hour(17)
                        .minute(20)
                        .format(formatRule),
                    moment()
                        .hour(18)
                        .minute(0)
                        .format(formatRule)
                ]
            ]
        },
        {
            id: 2,
            name: '李某某',
            rangeList: [
                [
                    moment()
                        .hour(12)
                        .minute(0)
                        .format(formatRule),
                    moment()
                        .hour(13)
                        .minute(0)
                        .format(formatRule)
                ]
            ]
        }
    ];

    const ref = React.useRef();
    React.useEffect(() => {
        const isConflict = ref.current?.checkConflict();
        console.log(isConflict);
    }, [range]);

    const props = {
        userList,
        range,
        onRangeChange: setRange,
        rangeTitle: 'xxx'
        // height: 300
    };

    return <Component ref={ref} {...props} />;
}
